/* CSS Document */

/* ALL_setting
================================================== */
*{
	margin:0;
	padding:0;
	font-family: "fot-tsukuaoldmin-pr6n", Meiryo, sans-serif, monospace;
	font-size: 16px;
}

html , body {
	min-height: 100%;
	height: auto;
	height: 100%;
}

img{vertical-align: bottom;}
.clear{clear:both;}
li{	text-decoration: none; }

.a_link{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

a { outline: none; }
a:focus, *:focus { outline:none; }

Heisei Kaku Gothic Std W3{
font-family: "heisei-kaku-gothic-std", sans-serif;
font-weight: 300;
font-style: normal;
}

FOT-TsukuAOldMin Pr6N L{
font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
font-weight: 300;
font-style: normal;
}

Futura PT Book{
font-family: "futura-pt", sans-serif;
font-weight: 400;
font-style: normal;
}

.pc{ display: inherit!important; }
.sp{ display: none!important; }
@media screen and (max-width: 699px){
.pc{ display: none!important; }
.sp{ display: inherit!important; }
}

/* Loading_setting
================================================== */

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align:center;
  color:#fff;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#splash_logo svg{
  width:300px;
}

#mask .st0{
    fill:none;
    stroke:#fff;
    stroke-width:90;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    stroke-dasharray: 1500;
    stroke-dashoffset:1500;
}

#container{
    width:100%;
    height: 100vh;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* CONTENTS_setting
================================================== */

.anemoi_main_test{
	position: fixed;
	right: 0;
	bottom: -12%;
	min-width: 1000px;
}

#main_wrapper{
	width: 100%;
	height: 100vh;
	opacity: 1;
	overflow: hidden;
}

.anemoi_main_fade{

	opacity: 0;
}

.main_anime{

	opacity: 1;
}

.main_anime img{
	width: 100%;
	opacity: 0;
	animation-name:fade-in2;
	animation-delay:0s;
	animation-duration:5s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
	position: fixed;
	min-width: 1200px;
}

@keyframes fade-in2 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}



.anemoi_sns_box{
	position: relative;
	z-index: 1;
	letter-spacing: -1em;
	opacity: 0;
	margin-bottom: 10px;
}

.anemoi_sns_box_fadein{
	opacity: 0;
	animation-name:sns_box_fadein;
	animation-delay:7s;
	animation-duration:2s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
}

@keyframes sns_box_fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.sns_icon_style1{
	display: inline-block;
	width: 15%;
	padding: 0 0% 0 10%;
	letter-spacing: 1em;
}

.sns_icon_style1:hover{
	opacity: 0.8;
}

.sns_icon_style2{
	display: inline-block;
	width: 15%;
	padding: 0 0% 0 10%;
	letter-spacing: 1em;
}

.anemoi_logo{
	position: fixed;
	z-index: 1;
	width: 34%;
	top: 17%;
	left: 12%;
	opacity: 0;
}

.anemoi_logo img{
	filter: drop-shadow(0px 0px 15px #e164a5);
}


.anemoi_logo_fadein{
	opacity: 0;
	animation-name:logo_fadein;
	animation-delay:5s;
	animation-duration:2s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
}

.anemoi_pc{
	display: block;
}

.anemoi_sp{
	display: none;
}

@keyframes logo_fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.anemoi_teaser_bt{
	position: fixed;
	z-index: 3;
	background-color: #6974eb;
	width: 20%;
	text-align: center;
	color: white;
	font-size: 2.2rem;
	font-size: clamp(1.8rem, 1vw, 2.2rem);
	letter-spacing: 0.1em;
	padding: 0.2% 1.5%;
	top: 52%;
	left: 16%;
	opacity: 0;
	pointer-events: none;
}

.anemoi_teaser_bt_fadein{
	opacity: 0;
	animation-name:teaser_bt_fadein;
	animation-delay:7s;
	animation-duration:2s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
}

@keyframes teaser_bt_fadein {
  0% {opacity: 0;}
  100% {opacity: 0.8;}
}

.teaser_bt:hover{
	opacity: 1!important;
}

.teaser_bt{
	pointer-events: auto!important;
}

.anemoi_catch{
	position: fixed;
	z-index: 1;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	top: 3.8%;
	right: 5.2%;
	font-size: 1.8rem;
	font-size: clamp(1.0rem, 2vw, 1.8rem);
	line-height: 1.8em;
}



.anemoi_catch_style1,.anemoi_catch_style2,.anemoi_catch_style3{
	font-size: 1em;
	padding-top: 10%;
	white-space: nowrap;
	transition: .2s;
	opacity: 0;
	letter-spacing: 0.2em;
	font-weight: 300;
	display: flex;
}

.anemoi_catch_style1 span{
	letter-spacing: -0em;
	font-size: 1em;
}

.catch_fadein_style1{
	opacity: 0;
	animation-name:catch_fadein;
	animation-delay:2s;
	animation-duration:3s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
	color: transparent;
}

.catch_fadein_style2{
	opacity: 0;
	animation-name:catch_fadein;
	animation-delay:3s;
	animation-duration:3s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
}

.catch_fadein_style3{
	opacity: 0;
	animation-name:catch_fadein;
	animation-delay:5s;
	animation-duration:3s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
}

@keyframes catch_fadein {
  0% {opacity: 0; text-shadow: 0 0 50px rgba(0,0,0,0);}
  100% {opacity: 1; text-shadow: 0 0 0 rgba(0,0,0,1);}
}

.anemoi_footer{
	position: fixed;
	width: 100%;
	background: white;
	bottom: 0;
	z-index: 1;
	opacity: 0;
}

.anemoi_footer_fadein{
	opacity: 0;
	animation-name:footer_fadein;
	animation-delay:7s;
	animation-duration:2s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
}

@keyframes footer_fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


.anemoi_flex{
	width: 96%;
	padding: 0.8% 0 1.8%;
	margin: auto;
	display: flex;
	flex-wrap:nowrap;
	align-items: end;
	justify-content:space-between;
}

.anemoi_text{
	flex-basis: 70%;
	font-size: 1.0rem;
	font-size: clamp(0.7rem, 1vw, 1.0rem);
	padding: 0 0 0 5%;
	line-height: 1.6em;
	white-space: nowrap;
	font-weight: lighter;
}

.anemoi_text span{
	font-size: 0.7rem;
	font-size: clamp(0.5rem, 1vw, 0.7rem);
}

.anemoi_space{
	flex-basis: 20%;
}

.anemoi_copyright{
	flex-basis: 10%;
	font-size: 0.8rem;
	font-size: clamp(0.6rem, 1vw, 0.8rem);
	vertical-align: bottom;
	white-space: nowrap;
	font-weight: lighter;
	text-align: right;
	font-family: "futura-pt", sans-serif;
}

.anemoi_copyright span{
	font-size: 1em;
	font-family: "futura-pt", sans-serif;
}

.anemoi_hashtag{
	font-size: 2.2em;
	font-size: clamp(1.4rem, 2vw, 2.2rem);
	letter-spacing: 0.2em;
	padding: 0 0 0px 0;
	background: linear-gradient(0deg, #ffcc99 0%, #dec2f4 40%, #aba8f5 70%, #6a87eb 100%);
	background: -webkit-linear-gradient(0deg, #ffcc99 0%, #dec2f4 40%, #aba8f5 70%, #6a87eb 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.anemoi_project_start{
	position: fixed;
	z-index: 2;
	width: 30%;
	bottom: 0%;
	right: 8%;
	opacity: 1;
}

.anemoi_project_start_fadein{
	opacity: 0;
	animation-name:project_start_fadein;
	animation-delay:7s;
	animation-duration:2s;
	animation-timing-function: ease-out;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode: forwards;
}

.anemoi_pv_box{
	display: none;
}

.anemoi_footer_sp{
	display: none;
}

.svg_pc{
	display: block;
}

.svg_sp{
	display: none;
}

.key_logo{
	position: fixed;
	width: 3.6%;
	min-width: 70px;
	top: 3%;
	left: 1.5%;
	z-index: 1;
	letter-spacing: -1em;
	opacity: 0;
	display: block;
}

.anemoi_sns_box_sp{
	display: none;
}

@keyframes project_start_fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

/* TABLET_SP_setting
================================================== */

@media screen and (max-width: 1299px){

	#main_wrapper{
		width: 100%;
		height: auto;
		opacity: 1;
		overflow: auto;
	}

	.anemoi_main_fade{
		display: block;
	}

	.anemoi_main_fade img{
		opacity: 0;
	}


	.main_anime img{
		width: 100%;
		opacity: 0;
		animation-name:fade-in2_sp;
		animation-delay:0s;
		animation-duration:8s;
		animation-timing-function: ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
		position: relative;
		bottom: 0%;
		top: 0%;
		min-width: auto;
	}

	.anemoi_sns_box{
		display: none;
	}

	.anemoi_logo{
		position: absolute;
		z-index: 1;
		width: 80%;
		max-width: 600px;
		top: 3%;
		left: auto;
		right:47.5%;
		transform: translate(50%, 0%);
		opacity: 0;
	}

	.anemoi_logo_fadein{
		opacity: 0;
		animation-name:logo_fadein;
		animation-delay:5s;
		animation-duration:2s;
		animation-timing-function: ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
	}

	.anemoi_logo img{
		filter: none;
	}

	.anemoi_catch{
		position: absolute;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		top: 340px;
		right:50%;
		transform: translate(50%, 0%);
		font-size: 1.6rem;
		font-size: clamp(1.0rem, 1vw, 1.6rem);
		line-height: 1.6em;
	}

	.anemoi_catch_style1,.anemoi_catch_style2,.anemoi_catch_style3{
		font-size: 1.6rem;
		font-size: clamp(1.0rem, 3vw, 1.6rem);
		line-height: 1.6rem;
		line-height: clamp(2.0rem, 6vw, 3.2rem);
		padding-top: 0%;
		white-space: nowrap;
		transition: .2s;
		opacity: 0;
		letter-spacing: 0.2em;
		font-weight: normal;
		display: flex;
		color: white;
	}



	.catch_fadein_style1{
		opacity: 0;
		animation-name:catch_fadein_sp;
		animation-delay:2s;
		animation-duration:3s;
		animation-timing-function: ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
		color: transparent;
	}

	.catch_fadein_style2{
		opacity: 0;
		animation-name:catch_fadein_sp;
		animation-delay:4s;
		animation-duration:2s;
		animation-timing-function: ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
	}

	.catch_fadein_style3{
		opacity: 0;
		animation-name:catch_fadein_sp;
		animation-delay:6s;
		animation-duration:2s;
		animation-timing-function: ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
	}

	.anemoi_teaser_bt{
		display: none;
	}

	.anemoi_space{
		flex-basis:auto;
	}

	.anemoi_project_start{
		position: relative;
		z-index: 2;
		width: 100%;
		bottom: 0%;
		right: 0%;
		opacity: 1;
		display: block;
	}

	.anemoi_footer{
		position: relative;
		width: 100%;
		background: white;
		bottom: 0;
		z-index: 1;
		opacity: 1;
	}

	.anemoi_footer_fadein{
		opacity: 1;
		animation-name:none;
		animation-delay:2s;
		animation-duration:2s;
		animation-timing-function: ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
	}

	.anemoi_pv_box{
		display: block;
		width: 86%;
		margin: auto;
		padding: 4% 0 0 0;
		opacity: 0;
	}

	.anemoi_pv_fadein{
		opacity: 0;
		animation-name:catch_fadein_sp;
		animation-delay:2s;
		animation-duration:2s;
		animation-timing-function: ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
	}

	.anemoi_footer{
		position: relative;
		width: 100%;
		margin: auto;
		background: white;
		bottom: 0;
		z-index: 1;
		opacity: 0;
		border-top: 1px solid #6974ea;
		padding: 10px 0 0 0;
	}

	.anemoi_footer_fadein{
		opacity: 0;
		animation-name:fade-in2_sp;
		animation-delay:2s;
		animation-duration:2s;
		animation-timing-function: ease-out;
		animation-iteration-count:1;
		animation-direction:normal;
		animation-fill-mode: forwards;
	}



	.anemoi_flex{
		width: 86%;
		padding: 0% 0;
		margin: auto;
		display: block;
		flex-wrap:nowrap;
		align-items: center;
		justify-content:space-between;
	}

	.anemoi_text{
		flex-basis: auto;
		font-size: 1.0rem;
		font-size: clamp(0.8rem, 1vw, 1.0rem);
		padding: 0 0 0 0%;
		line-height: 1.8em;
		white-space:normal;
		font-weight: lighter;
	}

	.anemoi_text span{
		font-size: 0.7rem;
		font-size: clamp(0.5rem, 3vw, 0.7rem);
	}

	.anemoi_copyright{
		flex-basis: auto;
		font-size: 0.8rem;
		font-size: clamp(0.6rem, 3vw, 0.8rem);
		vertical-align: bottom;
		white-space: nowrap;
		font-weight: lighter;
		text-align: right;
		font-family: "futura-pt", sans-serif;
		margin: -10% 0 0 0;
	}

	.anemoi_hashtag{
		font-size: 2.4em;
		font-size: clamp(1.6rem, 2vw, 2.4rem);
		letter-spacing: 0.2em;
		padding: 0 0 0px 0;
		margin: 0;
		background: linear-gradient(0deg, #ffcc99 0%, #dec2f4 40%, #aba8f5 70%, #6a87eb 100%);
		background: -webkit-linear-gradient(0deg, #ffcc99 0%, #dec2f4 40%, #aba8f5 70%, #6a87eb 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		vertical-align: top;
	}

	.anemoi_copyright span{
		display: none;
	}

	.anemoi_footer_sp{
		margin: 4% 0 0 0;
		background-image:url("../image/anemoi_main_sp.jpg");
		background-color:rgba(255,255,255,0.8);
		background-blend-mode:lighten;
		background-size: 135%;
		background-position: center bottom;
		display: block;
		opacity: 0;
	}

	.anemoi_footer_sp_bg{
		background-color:rgba(105,116,234,0.4);
	}

	.anemoi_sns_box_sp{
		width: 60%;
		padding: 10% 0 2% 0;
		margin: auto;
		letter-spacing: -1em;
		display: block;
	}

	.anemoi_sns_icon_sp{
		width: 15%;
		margin: 0 9%;
		display: inline-block;
		letter-spacing: normal;
	}

	.anemoi_sns_copyright_sp{
		font-size: 0.8em;
		font-family: "futura-pt", sans-serif;
		text-align: center;
		padding: 2% 0 4%;
		color: white;
	}

	.anemoi_sp{
		display: block;
	}
	.anemoi_pc{
		display: none;
	}

	.svg_pc{
		display: none;
	}
	
	.svg_sp{
		display: block;
	}
	
	.key_logo{
		display: none;
	}
	
	.key_logo_white{
		width: 12%;
		padding: 4% 0 0 0;
		margin: auto;
	}

}

@media screen and (max-width: 699px){
	.anemoi_catch{
		position: absolute;
		z-index: 1;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		top: 220px;
		right:50%;
		transform: translate(50%, 0%);
		font-size: 1.6rem;
		font-size: clamp(1.0rem, 1vw, 1.6rem);
		line-height: 1.6em;
	}
	
	.anemoi_logo{
		position: absolute;
		z-index: 1;
		width: 80%;
		max-width: 340px;
		top: 3%;
		left: auto;
		right:47.5%;
		transform: translate(50%, 0%);
		opacity: 0;
	}



}

/* TABLET_SP_animation
================================================== */

@keyframes fade-in2_sp {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes catch_fadein_sp {
  0% {opacity: 0; text-shadow: 0 0 50px rgba(255,255,255,0);}
  100% {opacity: 1; text-shadow: 0 0 0 rgba(255,255,255,1);}
}

